CSS - Cascading Style Sheets = Foi de stil în cascadă.
CSS descrie cum arată elementele HTML - poziție, dimensiune, culoare. Pentru aceasta fiecărui element HTML se consideră că i se asociază un set de proprietăți numite descriptori de format. Fiecărui asemenea descriptor i se asociază o valoare care afectează înfățișarea sau poziția elementului. De exemplu pentru a descrie cum arată un text se folosesc descriptorii: font-size, font-family, color, etc. Unii descriptori acceptă mai multe valori simultan referindu-se la mai multe caracteristici ale elementului în același timp.
CSS se poate atașa elementelor HTML în 3 moduri:
În acest caz stilul se atașează direct elementului folosind atributul style. Pentru a vedea stilul asociat textului de mai jos folosiți opțiunea View page source.
Paragraf cu dimensiune 30 pixeli, font Comic Sans MS și culoare roșie.
Descriptorii folosiți în exemplul de mai sus sunt: font-size cu valoarea 30 de pixeli, font-family cu valoarea Comis Sans MS și color cu valoarea #ff0000.
Acest mod de folosire a CSS este nerecomandat deoarece prezintă o serie de dezavantaje:
În acest caz descriptorii sunt grupați în zona head a paginii folosind elementul style. Zona style va conține o listă de definiții CSS. Fiecare definiție cuprinde unul sau mai mulți selectori (dacă sunt mai mulți se despart prin virgulă). Aceștia precizează căror elemente din pagină li se aplică descriptorii. Corpul definiției va conține descriptorii care se vor aplica elementelor selectate grupați între acolade. În acest fel putem preciza cu o singură lista de descriptori cum arată toate elementele de tip h2 din pagină, de exemplu. Vizualizați pagina cu opțiunea View page source și studiați zona style din antetul paginii pentru a vedea un exemplu de folosire a CSS în acest mod.
Avantajul acestei metode este că se scrie o singură descriere și se aplică mai multor elemente în același timp. Modificând ceva într-un singur loc vom produce o schimbare a aspectului tuturor elementelor afectate din întreaga pagină.
Dezavantajul este că, pentru a aplica același stil unei alte pagini trebuie să includem o zonă style și în pagina respectivă.
În acest caz se construiește o foaie de stil externă salvată cu extensia .css care va descrie cum arată elementele. Apoi, în fiecare pagină HTML pe care o dorim afectată includem o legătură către foaia de stil folosind elementul link sau directiva @import.
Acest mod de folosire este cel recomandat deoarece permite modificarea tuturor paginilor unui site cu ajutorul unei singure foi de stil. O singură schimbare va modifica înfățișarea tuturor paginilor. Deschideți fișierul 01 - conectare CSS - HTML.css și vizualizați sursa fișierului 01 - conectare CSS - HTML.html pentru a vedea exemple de folosire a CSS în acest mod.